<template>
  <view class="user-segment">
    <view 
      class="segment-item" 
      :class="{ active: activeTab === USER_TYPE.RESIDENT, 'resident': activeTab === USER_TYPE.RESIDENT }"
      @click="changeTab(USER_TYPE.RESIDENT)"
    >
      {{ getUserTypeLabel(USER_TYPE.RESIDENT) }}
    </view>
    <view 
      class="segment-item" 
      :class="{ active: activeTab === USER_TYPE.ENTERPRISE, 'enterprise': activeTab === USER_TYPE.ENTERPRISE }"
      @click="changeTab(USER_TYPE.ENTERPRISE)"
    >
      {{ getUserTypeLabel(USER_TYPE.ENTERPRISE) }}
    </view>
  </view>
</template>

<script>
import { USER_TYPE, getUserTypeLabel } from '../type.js'

export default {
  name: 'UserSegment',
  props: {
    value: {
      type: String,
      default: USER_TYPE.RESIDENT,
      validator: (value) => {
        return Object.values(USER_TYPE).includes(value)
      }
    }
  },
  data() {
    return {
      USER_TYPE // 暴露给模板使用
    }
  },
  computed: {
    activeTab: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  methods: {
    changeTab(tab) {
      this.activeTab = tab
      this.$emit('change', tab)
    },
    getUserTypeLabel
  }
}
</script>

<style lang="scss" scoped>
@import '@/uni.scss';

.user-segment {
  display: flex;
  background-color: #f0f0f0;
  border-radius: 8rpx;
  overflow: hidden;
  margin: 0 20rpx 20rpx;
  height: 80rpx;
  
  .segment-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    color: #333;
    transition: all 0.3s;
    
    &.active {
      color: #fff;
      font-weight: 500;
      
      &.resident {
        background-color: $resident-theme-color;
      }
      
      &.enterprise {
        background-color: $enterprise-theme-color;
      }
    }
  }
}
</style> 